<template>
	<view class="plugin-view">
		<banner-view></banner-view>
		<view class="group" v-for="(group, groupIndex) in pluginList" :key="group.menuId">
			<text class="plugin-title">{{group.menuName}}</text>
			<view class="grid">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item, index) in group.children" @click="pluginClick(item, groupIndex, index)" :key="item.menuId">
						<u-image width="98rpx" height="98rpx" :src="item.icon"></u-image>
						<view class="grid-text">{{item.menuName}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-empty class="noContent" v-if="emptyShow" text="请联系管理员配置相关权限"  mode="list"></u-empty>
	</view>
</template>

<script>
	import BannerView from '@/components/banner-view.vue'
	import { mapGetters } from 'vuex'
	export default {
		name: 'Plugin',
		components: {
			BannerView
		},
		computed: {
			...mapGetters({
				findMenuList: 'user/findMenuList'
			}),
			channel() {
				return getApp().globalData.channel;
			},
		},
		data() {
			return {
				pluginList: [],
				emptyShow: false,
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				this.emptyShow = false;
				this.findMenuList('plugin').then(res => {
					console.log(res);
					this.pluginList = res.children;
					if (this.pluginList.length === 0) {
						this.emptyShow = true;
					}
				}).catch(error => {
					console.log(error);
					this.emptyShow = true;
				})
			},
			handleGoLeaveManagement(url){
				this.$u.route({
					url:url
				})
			},
			pluginClick(plugin, groupIndex, index) {				
				this.$u.route({
					url: plugin.url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.plugin-view{
		background-color: $app-page-bg-color;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 80rpx;
		display: flex;
		flex-direction: column;
		
		.group{
			margin-top: 30rpx;
			
		}
	}
	
	.plugin-title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 40rpx;
	}
	
	.grid{
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	
	.grid-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 16rpx;
	}
</style>